<template>
  <div class="content-toolbar">
    <div>
      <span class="content-toolbar_title title_hover">滤镜</span>
      <el-switch size="small"/>
    </div>
    <div>
      <span class="content-toolbar_title">组件缩放</span>
      <el-switch size="small"/>
    </div>
    <div>
      <span class="content-toolbar_title">参考线</span>
      <el-switch size="small" v-model:value="referLine.enable"/>
    </div>
    <div>
      <span class="content-toolbar_title">对齐线</span>
      <el-switch size="small" v-model:value="alignLine.enable"/>
    </div>
  </div>

</template>

<script>
import { computed, defineComponent } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  name: "header-toolbar",
  components: {},
  setup() {
    const store = useStore();
    const alignLine = computed(() => store.state.design.alignLine);
    const referLine = computed(() => store.state.design.referLine);
    return {
      alignLine,
      referLine
    };
  }
});
</script>

<style lang="less" scoped>
@import "./../../../../style/theme/index.less";

.content-toolbar {
  z-index: 10;
  transition: height .3s ease;
  border-bottom: 1px solid #000;
  display: flex;
  align-items: center;
  background-color: @background-color-2;

  & > div {
    .content-toolbar_title {
      text-decoration: underline dotted;
      font-size: 12px;
      cursor: help;
      color: @color-7;
      padding: 0 4px;
    }

    .title_hover {
      cursor: pointer;
    }

    .title_hover:hover {
      color: @color-3;
      border-bottom: 1px solid @color-3;
    }

    padding: 0 12px;
  }
}
</style>
